<!--
 * @Author: lsy
 * @Date: 2023-02-14 21:52:44
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-17 14:55:03
 * @Description: 学生列表
-->
<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<!-- <el-button type="primary" icon="el-icon-plus" @click="drawer.show_add = true" class="mr10">
					添加学员
				</el-button> -->
				<scFileImport
					ref="scFileImport"
					class="mr10"
					:apiObj="importExcel.apiObj"
					:templateUrl="importExcel.templateUrl"
				>
					<template #default="{ open }">
						<el-button type="primary" @click="open">
							批量导入
						</el-button>
					</template>
				</scFileImport>
				<el-button icon="el-icon-download">导出</el-button>
				<!-- <el-button type="danger" @click="deleteStudentHandle">删除</el-button> -->
			</div>
			<div class="right-panel"></div>
		</el-header>
		<el-main class="nopadding">
			<scTable
				ref="table"
				tableName="studentList"
				v-bind="list"
				row-key="id"
				stripe
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<template #studentName="scope">
					<el-link
						:underline="false"
						type="primary"
						:href="`#/student/detail/${scope.row.studentId}`"
						>{{ scope.row.studentName }}</el-link
					>
				</template>
			</scTable>
		</el-main>

		<!-- 添加学员 -->
		<AddStudent
			v-if="drawer.show_add"
			@close="drawer.show_add = false"
			@success="search"
		/>
	</el-container>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import SearchForm from "@/components/SearchForm/index.vue";
import AddStudent from "./components/addStudent/index.vue";
import scFileImport from "@/components/scFileImport";

import { formColumn, column } from "./data";

export default {
	components: {
		SearchForm,
		AddStudent,
		scFileImport,
	},
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.student.list,
				params: {},
				column,
			},
			drawer: {
				show_add: false,
			},
			importExcel: {
				templateUrl:
					"https://binaries.templates.cdn.office.net/support/templates/zh-cn/tf45048037_win32.xltm",
				apiObj: {
					post: () => Promise.resolve([]),
				},
			},
		};
	},
	methods: {
		search(searchParams) {
			let params = {};
			if (searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams));
				params = Object.assign({}, searchObj, this.list.params);
			} else {
				params = Object.assign({}, this.list.params, {});
			}
			console.log(params);
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
		deleteStudentHandle() {
			const tableSelection = this.$refs.table.tableSelection;
			if (!tableSelection.length) {
				ElMessage({
					type: "warning",
					message: "请选择要删除的学生",
				});
				return;
			}
			ElMessageBox.confirm("确定删除选择的学生吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				this.deleteStudent(tableSelection);
			});
		},
		deleteStudent(students) {
			this.$API.student.delete
				.post({
					ids: students.map((item) => item.studentId),
				})
				.then((res) => {
					if (res.code === "0") {
						ElMessage({
							type: "success",
							message: "删除成功",
						});
					} else {
						ElMessage({
							type: "error",
							message: res.message,
						});
					}
				});
		},
		importStundentsExcel() {
			this.$refs.scFileImport.open();
		},
	},
};
</script>

<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}
</style>
